<!-- set -->
<template>
    <div class="main-content">
        <div class="left-con">
            <page-header 
            :showCount="false"
            :showTime="false" 
            :showUser="false"></page-header>
            <ul>
                <li 
                v-for="menu in setMenus"
                :key="menu.id"
                @click="handleClickMenu(menu.id)"
                :class="[
                    `menu-item-${menu.id}`,
                    menu.id == active ? 'active' : ''
                ]">
                    {{menu.menu}}
                    <div class="menu-icon"></div>
                </li>
            </ul>
        </div>
        <div class="right-con">
            <component :is="who"></component>
        </div>
    </div>
</template>

<script>

export default {
    name: 'set',
    components: {
        'page-header': () => import('@/components/page-header'),
        'tool-set': () => import('@/components/set/tool-set'),
        'temp-set': () => import('@/components/set/temp-set'),
        'user-set': () => import('@/components/set/user-set'),
        'dict-set': () => import('@/components/set/dict-set'),
        //'sys-set': () => import('@/components/set/sys-set'),
    },
    data () {
        this.setMenus = [{
            id: 0,
            menu: '工具设置',
            cmp: 'tool-set'
        },{
            id: 1,
            menu: '模板设置',
            cmp: 'temp-set'
        },{
            id: 2,
            menu: '用户设置',
            cmp: 'user-set'
        },
        //{
        //     id: 3,
        //     menu: '系统设置',
        //     cmp: 'sys-set'
        // }
        ]
        return {
            who: 'tool-set',
            active: 0
        }
    },
    props: {},
    methods: {
        // 点击菜单
        handleClickMenu (id) {
            this.active = id;
            this.who = this.setMenus[id].cmp;
        }
    }
}
</script>
<style lang='scss'>


.left-con {
    width: 12%;
    height: 100%;
    float: left;
    overflow: hidden;

    ul {
        height: calc(100% - 90px);
        overflow: auto;

        li {
            height: 88px;
            font-size: 32px;
            color: rgba(255,255,255,.6);
            box-sizing: border-box;
            padding-left: 46px;
            position: relative;
            line-height: 88px;
            cursor: pointer;

            .menu-icon{
                width: 32px;
                height: 32px;
                position: absolute;
                top: 28px;
                left: 0;
            }

            
        }

        .menu-item-0 {
            .menu-icon {
                background: url('../../assets/tool-nor.png');
                background-size: 100% 100%;
            }
        }

        .menu-item-1 {
            .menu-icon {
                background: url('../../assets/temp-nor.png');
                background-size: 100% 100%;
            }
        }

        .menu-item-2 {
            .menu-icon {
                background: url('../../assets/user-nor.png');
                background-size: 100% 100%;
            }
        }

        .menu-item-3 {
            .menu-icon {
                background: url('../../assets/dict-nor.png');
                background-size: 100% 100%;
            }
        }

        .active.menu-item-0 {
            .menu-icon {
                background: url('../../assets/tool.png');
                background-size: 100% 100%;
            }
        }

        .active.menu-item-1 {
            .menu-icon {
                background: url('../../assets/temp.png');
                background-size: 100% 100%;
            }
        }

        .active.menu-item-2 {
            .menu-icon {
                background: url('../../assets/user-set.png');
                background-size: 100% 100%;
            }
        }

        .active.menu-item-3 {
            .menu-icon {
                background: url('../../assets/dict.png');
                background-size: 100% 100%;
            }
        }

        .active {
            color: #fff;
        }
    }
}

.right-con {
    width: 88%;
    height: 100%;
    overflow: hidden;
    float: left;

    .set-wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .el-form-item {
            .el-form-item__label {
                float: left;
                color: #fff!important;
            }

            .el-form-item__content {
                width: 650px!important;
                float: left;
                margin-left: 30px!important;
            }
        }

        .el-dropdown {
            font-size: 24px;
            color: #fff;

            
        }

        .el-button--text {
            font-size: 32px;
        }

        .el-tree, .el-tree-node:focus>.el-tree-node__content,
        .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
            background: transparent;
        } 

        .el-tree-node__content:hover {
            background: transparent;
        }

        .el-tree-node__content {
            height: 60px;
        }

        .el-tree-node__expand-icon, .el-tree-node__label {
            font-size: 32px;
            color: #fff;
        }

        .el-tree-node.is-current > .el-tree-node__content {
            background: #2683ff!important;
            color: #2683FF!important;
        }

        .el-checkbox__inner {
            width: 32px;
            height: 32px;
        }

        .el-checkbox__inner::after {
            height: 20px;
            left: 10px;
            width: 10px;
        }

        .el-dialog {
            background: #2e3e61;

            .el-button {
                font-size: 32px;
            }
        }

        .el-dialog__headerbtn .el-dialog__close {
           font-size: 32px; 
           color: #fff;
        }

        .el-dialog__title {
            font-size: 32px;
            color: #fff;
        }

        .el-form-item__content .el-input__inner {
            background: #fff!important;
            color: #333!important;
        }

        .vue-treeselect__control {
            height: 70px;
            border: 0;
            border-radius: 4px;
            background: #fff; 
        }

        .vue-treeselect__placeholder, 
        .vue-treeselect__single-value,
        .vue-treeselect__option {
            line-height: 70px;
            font-size: 32px;
        }

        .vue-treeselect__menu {
            max-height: 500px;
        }

        .el-textarea {
            font-size: 32px;
            color: #333;

            textarea {
                min-height: 130px!important;
            }
        }

    }
}

.el-dropdown-menu__item {
    font-size: 24px;
    line-height: 44px;
}

</style>